<template>
  <div class="admin-content">
      <div class="admin-content-header">
          <div class="admin-content-header-left">
              <div>
                <span>小唐博客</span>
              </div>
          </div>
          <div class="admin-content-header-right">
              <div class="login">
                  <div class="login-img">
                      <img src="@/assets/headImg.png" alt="">
                  </div>
                  <div class="login-name">
                      <span>张三</span>
                  </div>
                  <div class="unlogin">
                      <span>
                          <el-row>
                            <el-button type="danger">退出登录</el-button>
                          </el-row>
                      </span>
                  </div>
              </div>
          </div>
      </div>
      <div class="admin-content-info">
           <div class="admin-left">
              <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :label="false">展开</el-radio-button>
                <el-radio-button :label="true">收起</el-radio-button>
              </el-radio-group>
              <el-menu
                default-active="1-4-1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :collapse="isCollapse"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <i class="iconfont icon-jibenxinxi"></i>
                    <span slot="title">用户管理</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">用户功能</span>
                    <router-link to="/admin/adminHome/adminUserList"
                      ><el-menu-item index="1-1">用户列表</el-menu-item></router-link
                    >
        
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="2">
                  <template slot="title">
                    <i class="iconfont icon-biaoti"></i>
                    <span slot="title">文章管理</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">文章内容</span>
                    <el-submenu index="1-4">
                      <span slot="title">我的文章</span>
                      <router-link to="/admin/adminHome/adminArticleList"
                        ><el-menu-item index="1-4-1"
                          >文章列表</el-menu-item
                        ></router-link
                      >
                    </el-submenu>
                  
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="4">
                  <template slot="title">
                    <i class="iconfont icon-neirongzixun-"></i>
                    <span slot="title">类型管理</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">类型内容</span>
                    <el-submenu index="1-4">
                      <span slot="title">我的类型</span>
                      <router-link to="/admin/adminHome/adminClassificationList"
                        ><el-menu-item index="1-4-1"
                          >类型列表</el-menu-item
                        ></router-link
                      >
                    </el-submenu>
                  
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="5">
                  <template slot="title">
                    <i class="iconfont icon-s24gl-tags"></i>
                    <span slot="title">标签管理</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">标签内容</span>
                    <el-submenu index="1-4">
                      <span slot="title">我的标签</span>
                      <router-link to="/admin/adminHome/adminDocumentList"
                        ><el-menu-item index="1-4-1"
                          >标签列表</el-menu-item
                        ></router-link
                      >
                    </el-submenu>
                  
                  </el-menu-item-group>
                </el-submenu>

                 <el-submenu index="6">
                  <template slot="title">
                    <i class="iconfont icon-p31pinglun"></i>
                    <span slot="title">评论管理</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">评论内容</span>
                    <el-submenu index="1-4">
                      <span slot="title">我的评论</span>
                      <router-link to="/admin/adminHome/adminCommentList"
                        ><el-menu-item index="1-4-1"
                          >评论列表</el-menu-item
                        ></router-link
                      >
                    </el-submenu>
                  
                  </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <i class="iconfont icon-shoucang1"></i>
                    <span slot="title">我的收藏</span>
                  </template>
                  <el-menu-item-group>
                    <span slot="title">我的收藏</span>
                    <el-menu-item index="1-1">收藏查看</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </div>
            <div class="admin-right">
                <div class="listInfo">
                    <router-view name="adminView"></router-view>
                </div>
            </div>
      </div>
  </div>
</template>
<script>
import CommentAdmininistration from "@/components/adminSystem//adminCommentAdmininistration/commentAdmininistration.vue"
import pubsub from "pubsub-js"
export default {
  name: "AdminHomePage",
  components:{
    CommentAdmininistration
  },
  data() {
    return {
      isCollapse: false,
      
    };
  },
  mounted(){
    //通知app组件展示此页面
    pubsub.publish("toadminHomePage")

  },
  methods: {
     handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
     open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
  .admin-content {
    width: 100%;
  
  }

  .admin-content-header{
      width: 100%;
      height: 70px;
      background: #fff;
      display: flex;
      justify-content: space-between;
  }
  .admin-content-header .admin-content-header-left{
    width: 15%;
    height: 100%;
  }
  .admin-content-header-left div span{
    font-size: 25px;
    line-height: 70px;
    margin-left: 20px;
  }
  .admin-content-header-right {
      width: 15%;
      height: 100%;
  
  }
  .admin-content-header-right .login{
    display: flex;
    /* justify-content: space-between; */
  }
  .login-img > img{
        width: 50px;
    height: 50px;
    border: 2px solid #ece5e5;
    border-radius: 50%;
    margin-top: 8px;
  }
  .login-name>span{
        display: block;
    height: 24px;
    width: 100px;
    /* line-height: 70px; */
    margin-left: 14px;
    font-size: 18px;
    margin-top: 23px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .unlogin > span{
    line-height: 70px;
  }
  .admin-content-info{
      width: 100%;
      display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .admin-left {
    padding-bottom: 15px;
    margin-left: 20px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 305px;
    /* min-height: 800px; */
  }

  .admin-left .iconfont {
    padding-right: 10px;
    color: #2882c5;
    font-size: 18px;
  }
  .admin-right{
    width: 100%;
    background: #fff;
    margin-left: 20px;
    border-radius: 10px;
  }
  .listInfo{
    margin: 20px 20px;
  }
</style>


